<template>
  <van-field
    v-if="h5"
    v-model="fieldModel"
    :is-link="!isDetail"
    readonly
    :name="item.options && item.options.name"
    :label="item.options && item.options.label"
    :disabled="item.options && item.options.disabled"
    :placeholder="isDetail ? '' : item.options && item.options.placeholder"
    :required="item.options && !isDetail && item.options.required"
    :rules="isDetail ? [] : rules"
    :border="false"
    :label-width="item.options?.labelPosition === 'top' ? '100%' : undefined"
    :label-align="(item.options && item.options.labelPosition) || undefined"
    :input-align="(item.options && item.options.inputAlign) || undefined"
    @click="onShowPicker"
  />
  <widget-form-item
    v-else
    :designer="designer"
    :widget-list="widgetList"
    :item="item"
    :rules="isDetail ? [] : rules"
    :index="index"
    :show-message="!isDetail"
  >
    <el-date-picker
      v-if="!isDetail"
      v-model="fieldModel"
      :type="type"
      style="display: inline-flex"
      :style="{ width: '100%' }"
      :disabled="item.options && item.options.disabled"
      :readonly="item.options && item.options.readonly"
      :placeholder="item.options && item.options.placeholder"
      :clearable="item.options && item.options.clearable"
      :format="format"
      :value-format="format"
      :editable="false"
    />
    <div v-else>
      {{ fieldModel }}
    </div>
  </widget-form-item>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      v-if="type === 'datetime'"
      v-model="currentDate"
      :title="item.options.label"
      :columns="columns"
      @confirm="onConfirm2"
      @cancel="showPicker = false"
      @change="onChangeDate"
    />
    <van-date-picker
      v-else
      v-model="currentDate1"
      :title="item.options.label"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script>
import { computed, ref } from 'vue'
import props from './props'
import field from './field'
import moment from 'moment'
import {
  columns,
  initDate,
  formatAllDate,
  currentDate,
  getcolumnsDate,
  onChangeDate,
  confirmchooseTime
} from './m-date'

export default {
  name: 'MDate',
  props,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const showPicker = ref(false)
    const day = moment().toObject()
    const currentDate1 = ref([day.years, day.months + 1, day.date])

    const type = computed(() => props.item.options.type || 'datetime')

    const format = computed(() => {
      if (props.item.options.format) {
        return props.item.options.format
      }
      if (props.item.options.type === 'datetime') {
        return 'YYYY-MM-DD HH:mm:ss'
      }
      return 'YYYY-MM-DD'
    })

    const formatter = (type, val) => {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      return val
    }

    const onShowPicker = () => {
      const { isDetail } = field(props, emit)
      if (!props.item.options.readonly && !props.item.options.disabled && !isDetail.value) {
        // H5 datetime 仿企业微信
        if (type.value === 'datetime') {
          initDate(props.item.options.defaultValue)
          const values = getcolumnsDate().map((g) =>
            g.values.map((m) => {
              return { text: m, value: m }
            })
          )
          columns.value = values
        }
        showPicker.value = true
      }
    }

    const onConfirm = ({ selectedValues }) => {
      selectedValues[1]--
      emit('update:modelValue', moment(selectedValues).format(format.value))
      showPicker.value = false
    }

    const onConfirm2 = () => {
      confirmchooseTime()
      emit('update:modelValue', moment(formatAllDate.value).format(format.value))
      showPicker.value = false
    }

    return {
      showPicker,
      currentDate,
      currentDate1,
      formatAllDate,
      type,
      format,
      formatter,
      columns,
      onShowPicker,
      onConfirm,
      onConfirm2,
      onChangeDate,
      ...field(props, emit)
    }
  }
}
</script>
